<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.box {
				width: 600px;
				background-color: gainsboro;
				margin: 0 auto;
			}
			
			/* 双伪元素清除浮动 */
			.clearfix:before,.clearfix:after {
				content: "";
				display: table;
			}
			.clearfix:after {
				clear: both;
			}
			.clearfix {
				*zoom: 1;
			}
			
			.div1 {
				float: left;
				width: 200px;
				height: 500px;
				background-color: red;
			}
			.div2 {
				float: left;
				width: 300px;
				height: 200px;
				background-color: gold;
			}
			.div3 {
				width: 900px;
				height: 500px;
				background-color: violet;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 
		 传统网页布局三种方式：标准流、浮动、定位
		 为什么需要浮动？？为了使块级元素全部占一行、左右对齐
		 float-left：
		 float-right：
		 
		 添加浮动之后，就具有了行内块元素的相似特性
		 所有的块级、行内元素有了浮动，不用转换为块级、行内元素
		 
		 父元素管上下，子元素管左右
		 浮动只会影响后面的标准流，不会影响前面的标准流
		 
		 
		 不可能将父元素高度写死，所以需要清除浮动
		 清除浮动的方法：
		 （1）额外标签法，也称为隔墙法,给最后元素后面添加块级元素<div style="clear:both"></div>
		 （2）父级添加overflow：hidden属性
		 （3）父级添加after伪元素
		 （4）父级添加双伪元素，before、after
		 
		 
		 -->
		<div class="box clearfix">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div style="clear:both"></div>
		</div>
		
		<div class="div3">div3</div>
		
	</body>
</html>
